<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding:0px;
                margin:0px;
            }
            div{
                width:200px;
                height:200px;
                border:1px solid red;
            }
        </style>
        <script>
            // event事件对象，只要触发了事件，就会产生事件对象，事件对象中包含了该事件的相关信息
            // type 事件类型
            // clientX获取鼠标指针所在的水平坐标
            // clientY获取鼠标指针所在的垂直坐标
            function f1(e){
                console.log(e.clientX+"*"+e.clientY);
            }
            window.onload=function () {
                  var mydiv=document.getElementById("mydiv");
                  mydiv.onclick=function (e) {//事件触发时会自动为函数传入一个参数，表示event事件对象
                      console.log(e.clientX+"*"+e.clientY);
                  };
            };
        </script>
    </head>
    <body>
        <!--<div id="mydiv" onclick="f1(event)"></div>-->
        <div id="mydiv" ></div>
    </body>
</html>